<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ALLADYN Project homepage</title>
<link rel="stylesheet" href="../al.css" type="text/css">
<script src="../js/Alladyn.js" type="text/javascript"></script>
<script>
<!--
function main() {
	with(vlay.planet){
		for(i=0;i<2*Math.PI;i+=0.1)vkf({left:100*Math.cos(i)+500,top:100*Math.sin(i)+900},1)
		van.go=true
		van.mode="loop"
	}
	with(vlay.moon){
		for(i=0;i<2*Math.PI;i+=0.1)vkf({left:60*Math.cos(i)+112,top:60*Math.sin(i)+112},1)
		van.go=true
		van.group="satellite"
		van.mode="loop"
	}
	
}
planet=false;satellite=false //example variables for use only in this example
//-->
</script>
<style type="text/css">
<!--
	div { font-family: "Trebuchet MS", "MS Sans Serif", "Arial CE", Arial, "Helvetica CE", Helvetica, sans-serif; font-size: 13px; line-height: 20px; color:#DDDDFF; }
	#tekst { position: absolute; width: 450px; zIndex: 2; border-width: 1px; border-style: solid; border-color: #DDDDFF; padding: 10px; top: 45px; }
	#head { position: absolute; top: 10px; }
//-->
</style>
</head>

<body background="../img/bg.gif" onload="Alladyn();main()">
<div id="head"><a href="http://alladyn.art.pl"><img src="../img/docs_exhead_eng.gif" width="450" height="35" alt="" border="0"></a></div>
<div id="tekst">
<div class="content">
	<span class="b">Example 6.3</span><br />
	Grouping movement elements.<br /><br />
	This example shows how to group layers in the movement groups. In this example we used grouping to independently activate two animations.<br /><br />
	The spheres on the right symbolize planets. Yellow sphere is a star, with the red planet circling around it. The green sphere is a satellite of this planet.<br />
	First, we define the planet's movement, using circle definition and trigonometry functions. The <span class="i">loop</span> movement type will cause the planet to move continuosly - it won't stop when animation finishes (after one circle), but it will perform the animation from the beginning:
</div>
<div class="ex1">
	with(vlay.planet){<br />
	&nbsp;&nbsp;&nbsp;&nbsp;for(i=0;i<2*Math.PI;i+=0.1) vkf({left:100*Math.cos(i)+500, top:100*Math.sin(i)+900},1)<br />
	&nbsp;&nbsp;&nbsp;&nbsp;van.go=true<br />
	&nbsp;&nbsp;&nbsp;&nbsp;van.mode="loop"<br />
	}<br />
</div>	
<div class="content">
	In the same way we will define the movement of the satellite - the moon. Layer that contain it is nested in the layer containing planet, so the satellite moves with the planet. The center of the satellite movement is, of course, the center of the planet.
</div>
<div class="ex1">
	with(vlay.moon){<br />
	&nbsp;&nbsp;&nbsp;&nbsp;for(i=0;i<2*Math.PI;i+=0.1) vkf({left:60*Math.cos(i)+112, top:60*Math.sin(i)+112},1)<br />
	&nbsp;&nbsp;&nbsp;van.go=true<br />
	&nbsp;&nbsp;&nbsp;van.group="satellite"<br />
	&nbsp;&nbsp;&nbsp;&nbsp;van.mode="loop"<br />
	}
</div>
<div class="content">
	When we modeled the moon movement, we assigned it to the different movement group called <span class="i">satellite</span>.<br /><br />
	Now we activate the animation of the default group "":<br /><br />
	<a href="javascript:planet=true;STPE.go('',30)">STPE.go('',30)</a><br /><br />
	The default group contains a layer containing planet and moon. After activating the animation of the default group, the layer starts to move. Moon moves with the planet, because it is on the same layer.<br /><br />
	This movement doesn't look realistic, so we should activate the <span class="i">satellite</span> group animation, which contains the moon:<br /><br />
	<a href="javascript:satellite=true;STPE.go('satellite',5)">STPE.go('satellite',5)</a><br /><br />
	This movement has smaller time interval - moon circles around the planet faster than planet circles around the star.<br /><br />
	In this way we showed you how to create independent groups of movement. Of course those animations can be activated independently from each other. Let's try to stop the animations of both groups using the links below:<br /><br />
	<a href="javascript:if(planet){planet=false;STPE.stop('')}">STPE.stop('')</a><br /><br />
	<a href="javascript:if(satellite){satellite=false;STPE.stop('satellite')}">STPE.stop('satellite')</a><br /><br />
	And now activate the animation once again, but turn on the satellite first this time.	
	<br /><br />
	<a href="javascript:history.back()">Back</a>
</div>
</div>
<div id="slonce" style="position: absolute; left: 600px; top: 1000px;"><img src="../img/docs_ex63c.gif" width="16" height="16" alt="" border="0"></div>
<div id="planet" style="position: absolute; left: 600px; top: 900px; height: 200px;">
	<div id="x" style="position: absolute; top: 100px; left: 100px;"><img src="../img/docs_ex63a.gif" width="45" height="45" alt="" border="0"></div>
	<div id="moon" style="position: absolute; left: 172px; top: 112px;"><img src="../img/docs_ex63b.gif" width="24" height="24" alt="" border="0"></div>
</div>
</body>
</html>

